<template>
    <div class="about" @click="hanldeCloes"> 
      <div class="ava">
        <div  @click="hanldeClick($event, item)" v-for="(item, index) in 10" :key="index"
        :style="{ left: (index + 1) * 150 + 'px' }">
  
        <el-image style="width: 100px; height: 100px" :src="src" fit="cover"></el-image>
      </div>
      </div>
      
  
      <el-card class="card" v-if="dialogVisible">
        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
        <div style="padding: 14px;">
          <span>好吃的汉堡</span>
          <div class="bottom clearfix">
            <time class="time">{{ title }}</time>
          </div>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'About',
  
    data() {
      return {
        title: '999',
        dialogVisible: false,
        innerHeight: 0,
        src: require('../assets/1.jpeg')
      };
    },
    created() {
      this.innerHeight = window.innerHeight
    },
  
  
    methods: {
      hanldeCloes() {
        console.log(9999)
        this.dialogVisible = false
  
      },
      hanldeClick(e, item) {
        e.preventDefault();
        e.stopPropagation();
        this.title = item + '名字'
        this.dialogVisible = true
        console.log(8888)
      }
    },
  };
  </script>
  
  <style lang="less" scoped>
  .about {
    width: 100%;
    height: 100%;
    position: relative;
  
    .card {
      position: absolute;
      left: 50%;
      z-index: 999;
    } 
  }
  .ava {
    position: absolute;
    left: 25%;
    animation: move 15s linear infinite;
  }
  
  @keyframes move {
    0% {
      bottom: 100%;
    }
  
    25% {
      bottom: 75%;
    }
  
    50% {
      bottom: 50%;
    }
  
    75% {
      bottom: 25%;
    }
  
    100% {
      bottom: 0%;
    }
  }
  </style>